<template>
  <div id="app">
      <div id="header_Item">
          <img src="https://erabbit-test.itheima.net/img/logo.0940ebb5.png" alt="">
          <h3 class="sub">欢迎登录</h3>
          <router-link class="entry" to="/Login">
            进入网站首页
            <van-icon name="arrow" />
            <van-icon name="arrow" />
          </router-link>
      </div>
      <div id="login_Item">
          <div class="wrappe">
            <nav>
              <a href="">账户登录</a>
              <a href="">短信登录</a>
            </nav>
            <div class="login_box">
              <div class="note">
                <a>
                  <van-icon name="envelop-o" />
                  使用短信验证
                </a>
              </div>
            </div>
            <form>
              <div class="form_item">
                <div class="input">
                  <van-icon name="contact" />
                  <input type="text" v-model="username" placeholder="请输入用户名">
                </div>
              </div>
              <div class="form_item">
                <div class="input">
                  <van-icon name="contact" />
                  <input type="password" v-model="password" placeholder="请输入密码">
                </div>
              </div>
              <div class="form_checkbox">
                <div class="agree">
                  <input type="checkbox" :checked="checked" @click="btn">
                  <span>我已同意</span>
                  <a href="#">《隐私条款》</a>
                  <span>和</span>
                  <a href="#">《服务条款》</a>
                </div>
                <p v-show="!checked">请勾选登录协议</p>
              </div>
              <a href="javascript:;" class="btn" @click="loginBtn">登录</a>
            </form>
            <div class="action">
              <a href="https://graph.qq.com/oauth2.0/authorize?client_id=101941968&response_type=token&scope=all&redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback">
                <img src="	https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
              </a>
              <div class="url">
                <a href="javascript">忘记密码</a>
                <a href="javascript">免费注册</a>
              </div>
            </div>
          </div>
      </div>
      <div id="footer_item">
          <p><a>关于我们</a>
          <a>帮助中心</a>
          <a>售后服务</a>
          <a>配送与验收</a>
          <a>商务合作</a>
          <a>搜索推荐</a>
          <a>友情链接</a></p>
          <p>CopyRight © 小兔鲜儿</p>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      username:"xiaotuxian001",
      password:"123456",
      checked:true,
    }
  },
  methods:{
    loginBtn(){
     this.$http({
      method:'post',
      url:'http://pcapi-xiaotuxian-front-devtest.itheima.net/login',
      data:{
        "account":this.username,
        "password": this.password
      }
    }).then((res)=>{
      localStorage.setItem("token",res.data.result.token);
      localStorage.setItem("user",JSON.stringify(res.data.result));
      this.$router.push({
        path:"/home"
      })
      // let token='123'
      // localStorage.setItem("token",token)
      // this.$router.push('/')
    })
    },
    btn(){
      this.checked=!this.checked
    }
  }
}
</script>

<style lang="less" scoped>
  #header_Item{
    width:1240px;
    height:132px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img{
      width:200px;
    }
    .sub{
      flex: 1;
      font-size: 24px;
      font-weight: 400;
      margin-top: 38px;
      margin-left: 20px;
      color: #666;
    }
    .entry{
      width: 120px;
      margin-top: 38px;
      font-size: 16px;
      i{
        font-size: 14px;
        color: #27ba9b;
        letter-spacing: -5px;
      }
    }
  }
  #login_Item{
    background: url(https://erabbit-test.itheima.net/img/login-bg.696efec3.png) no-repeat 50%/cover;;
    height: 488px;
    position:relative;
    .wrappe{
      width: 380px;
      background: #fff;
      min-height: 400px;
      position: absolute;
      left: 50%;
      top: 54px;
      transform: translate3d(100px,0,0);
      box-shadow: 0 0 10px rgba(0,0,0,.15);
      font-size:0;
      nav{
        height: 55px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        padding: 0 40px;
        text-align: right;
        align-items: center;
        :first-child{
          border-right: 1px solid #f5f5f5;
          text-align: left;
        }
        a{
          // color: #27ba9b;
          // font-weight: 700;
          flex: 1; 
          line-height: 1; 
          display: inline-block;
          font-size: 18px;
          position: relative;
          color: #333;
          outline: none;
        }
      }
      .login_box{
        .note{
          padding: 15px 40px;
          text-align: right;
          font-size:16px;
          a{
            color: #27ba9b;
            font-size:14px;
          }
        }
      }
      form{
        padding: 0 40px;
        .form_item{
          margin-bottom: 28px;
          .input{
            position: relative;
            height: 36px;
            input{
              padding-left: 44px;
              border: 1px solid #cfcdcd;
              height: 36px;
              line-height: 36px;
              width: 100%;
              display:block;
              font-size:16px;
            }
            i{
              width: 34px;
              height: 34px;
              background: #cfcdcd;
              color: #fff;
              position: absolute;
              left: 1px;
              top: 1px;
              text-align: center;
              line-height: 34px;
              font-size: 18px;
            }
          }
        }
        .form_checkbox{
          margin-bottom: 28px;
          font-size:16px;
          .agree{
            display: flex;
            a{
              color: #069;
            }
          }
        }
        .btn{
          display: block;
          width: 100%;
          height: 40px;
          color: #fff;
          text-align: center;
          line-height: 40px;
          background: #27ba9b;
          font-size:16px;
        }
      }
      p{
        position: absolute;
        font-size: 12px;
        line-height: 28px;
        color: #cf4444;
      }
      .action{
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size:0;
        a{
          img{
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
          }
        }
        .url{
          display: flex;
          a{
              color: #999;
              margin-left: 10px;
              font-size:16px;
          }
        }
      }
    }
 }
 #footer_item{
    width: 1240px;
    margin: 0 auto;
    padding: 30px 0 50px;
    position: relative;
    font-size:14px;
    p{
      text-align: center;
      color: #999;
      padding-top: 20px;
      a{
        line-height: 1;
        padding: 0 10px;
        color: #999;
        display: inline-block;
        border-left: 1px solid #ccc;
      } 
    }
 }
</style>